// ==UserScript==
// @name         知乎直达文字显示优化
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  聊天文本全屏拉伸+字体大小/行高/宽度滑块控制+自动收缩面板
// @author       ChatGPT
// @match        https://zhida.zhihu.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 配置参数
    const config = {
        // 默认字体大小 (px)
        defaultFontSize: 16,
        // 默认行高倍数
        defaultLineHeight: 1.6,
        // 默认内容宽度比例 (%)
        defaultWidthPercent: 90,
        // 面板自动隐藏时间 (ms)
        autoHideDelay: 5000,
        // 初始显示时间 (ms)
        initialShowTime: 8000
    };

    // 创建样式
    function createStyles() {
        const style = document.createElement('style');
        style.id = 'zhida-text-optimizer';
        document.head.appendChild(style);
        updateStyles(config.defaultFontSize, config.defaultLineHeight, config.defaultWidthPercent);
    }

    // 更新样式
    function updateStyles(fontSize, lineHeight, widthPercent) {
        const style = document.getElementById('zhida-text-optimizer');
        if (!style) return;

        style.textContent = `
            /* 聊天容器宽度设置 */
            .css-175oi2r[style*="width: 712px"] {
                width: ${widthPercent}% !important;
                max-width: ${widthPercent}% !important;
                align-self: center !important;
            }
            
            /* 聊天文本样式 */
            .css-146c3p1, 
            .Render-markdown,
            .Render-markdown p,
            .Render-markdown li,
            .Render-markdown ul,
            .Render-markdown ol {
                font-size: ${fontSize}px !important;
                line-height: ${lineHeight} !important;
            }
            
            /* 代码块样式 */
            pre, code,
            .language-mermaid,
            .Render-markdown pre,
            .Render-markdown code {
                font-size: ${fontSize - 1}px !important;
                line-height: ${lineHeight} !important;
            }
            
            /* 确保表格内容也使用相同字体大小 */
            table, th, td {
                font-size: ${fontSize}px !important;
                line-height: ${lineHeight} !important;
            }
            
            /* 控制面板样式 */
            #zhida-control-panel {
                position: fixed;
                top: 20px;
                right: 20px;
                background: rgba(90, 77, 248, 0.85);
                padding: 15px;
                border-radius: 12px;
                z-index: 9999;
                color: white;
                font-size: 14px;
                width: 250px;
                backdrop-filter: blur(5px);
                box-shadow: 0 4px 10px rgba(90, 77, 248, 0.3);
                transition: all 0.3s ease;
                transform-origin: top right;
            }
            
            #zhida-control-panel.hidden {
                display: none;
            }
            
            #zhida-control-panel .slider-container {
                margin-bottom: 12px;
            }
            
            #zhida-control-panel label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }
            
            #zhida-control-panel .slider-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            
            #zhida-control-panel input[type="range"] {
                flex: 1;
                margin-right: 10px;
            }
            
            #zhida-control-panel .value-display {
                min-width: 40px;
                text-align: right;
            }
            
            /* 小圆点样式 */
            #zhida-control-dot {
                position: fixed;
                top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                background: rgba(90, 77, 248, 0.9);
                border-radius: 50%;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(90, 77, 248, 0.5);
                transition: all 0.3s ease;
                opacity: 0;
                transform: scale(0);
            }
            
            #zhida-control-dot.visible {
                opacity: 1;
                transform: scale(1);
            }
            
            #zhida-control-dot:hover {
                transform: scale(1.1);
            }
        `;
    }

    // 创建控制面板
    function createControlPanel() {
        const panel = document.createElement('div');
        panel.id = 'zhida-control-panel';
        panel.innerHTML = `
            <div class="slider-container">
                <label>文本大小</label>
                <div class="slider-row">
                    <input type="range" id="font-size-slider" min="5" max="45" step="2" value="${config.defaultFontSize}">
                    <span class="value-display" id="font-size-value">${config.defaultFontSize}px</span>
                </div>
            </div>
            <div class="slider-container">
                <label>行高</label>
                <div class="slider-row">
                    <input type="range" id="line-height-slider" min="0.5" max="5" step="0.2" value="${config.defaultLineHeight}">
                    <span class="value-display" id="line-height-value">${config.defaultLineHeight}倍</span>
                </div>
            </div>
            <div class="slider-container">
                <label>内容宽度</label>
                <div class="slider-row">
                    <input type="range" id="width-slider" min="50" max="100" step="2" value="${config.defaultWidthPercent}">
                    <span class="value-display" id="width-value">${config.defaultWidthPercent}%</span>
                </div>
            </div>
        `;
        document.body.appendChild(panel);

        // 创建小圆点（最小化状态）
        const dot = document.createElement('div');
        dot.id = 'zhida-control-dot';
        dot.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"></path></svg>`;
        document.body.appendChild(dot);

        return { panel, dot };
    }

    // 添加事件监听
    function setupEventListeners(panel, dot) {
        let hideTimer;
        
        // 字体大小滑块
        const fontSizeSlider = document.getElementById('font-size-slider');
        const fontSizeValue = document.getElementById('font-size-value');
        
        // 行高滑块
        const lineHeightSlider = document.getElementById('line-height-slider');
        const lineHeightValue = document.getElementById('line-height-value');
        
        // 宽度滑块
        const widthSlider = document.getElementById('width-slider');
        const widthValue = document.getElementById('width-value');

        // 重置隐藏计时器
        function resetHideTimer() {
            clearTimeout(hideTimer);
            hideTimer = setTimeout(() => {
                hidePanel();
            }, config.autoHideDelay);
        }

        // 隐藏面板，显示小圆点
        function hidePanel() {
            panel.classList.add('hidden');
            dot.classList.add('visible');
        }

        // 显示面板，隐藏小圆点
        function showPanel() {
            panel.classList.remove('hidden');
            dot.classList.remove('visible');
            resetHideTimer();
        }

        // 字体大小滑块事件
        fontSizeSlider.addEventListener('input', (e) => {
            const fontSize = parseInt(e.target.value);
            fontSizeValue.textContent = `${fontSize}px`;
            updateStyles(fontSize, parseFloat(lineHeightSlider.value), parseInt(widthSlider.value));
            resetHideTimer();
        });

        // 行高滑块事件
        lineHeightSlider.addEventListener('input', (e) => {
            const lineHeight = parseFloat(e.target.value);
            lineHeightValue.textContent = `${lineHeight}倍`;
            updateStyles(parseInt(fontSizeSlider.value), lineHeight, parseInt(widthSlider.value));
            resetHideTimer();
        });

        // 宽度滑块事件
        widthSlider.addEventListener('input', (e) => {
            const widthPercent = parseInt(e.target.value);
            widthValue.textContent = `${widthPercent}%`;
            updateStyles(parseInt(fontSizeSlider.value), parseFloat(lineHeightSlider.value), widthPercent);
            resetHideTimer();
        });

        // 面板悬停事件
        panel.addEventListener('mouseenter', () => {
            clearTimeout(hideTimer);
        });

        panel.addEventListener('mouseleave', () => {
            resetHideTimer();
        });

        // 小圆点点击事件
        dot.addEventListener('click', () => {
            showPanel();
        });

        // 初始显示一段时间后自动最小化
        setTimeout(() => {
            resetHideTimer();
        }, config.initialShowTime);
    }

    // 主函数
    function init() {
        // 等待页面加载完成
        setTimeout(() => {
            createStyles();
            const { panel, dot } = createControlPanel();
            setupEventListeners(panel, dot);
        }, 1500);
    }

    // 启动脚本
    init();
})();
